<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<script>
			/**
			 * 异步get请求
			 * ajax get json
			 * 后端使用resful /{x}/{x}
				@RequestMapping(value = "!{key}/{mid}/{var1}/{var2}/updPlacePoint" ,method = GET)
				@ResponseBody
				public Object updPlacePoint(@PathVariable Long mid,@PathVariable Double var1,@PathVariable Double var2){}
			 */
			
			<input id='changPoint' type="button" value="修改经纬度" onclick="changePont()" />
			
			function changePont() {
				var result;
				var url;
				$.ajax({
					type: "get",
					url: url,
					async: true,
					dataType: "json",
					success: function(__resultData) {
						result = __resultData.msg;
					}
				});
			}
		</script>

		/** * 异步提交post表单 * ajax post table * */ 
		/*
		@ResponseBody
		@RequestMapping(value = "!{key}/index.updProjectMsg", method = RequestMethod.POST )
		public Object updProjectMsg(HttpServletRequest request,UpdProjectMsg upmsg){
		*/
		<form id="updProjectMsgForm" method="post" action="index.updProjectMsg">
			<table>
				<input type='hidden' name='id' value='$!{form.id}' />
				<tr>
					<td style='text-align:right'>项目编号[E1]:</td>
					<td><input type='text' name='code' value='$!{form.code}' /></td>
					<td style='text-align:right'>项目名称[E4]:</td>
					<td><input type='text' size="35" name='name' value='$!{form.name}' /></td>

				</tr>

				<tr>
					<td style='text-align:right'> 请选择项目属性:</td>
					<td>
						<select id='projectType' name='proProperty'>
							<option value="-1">--项目属性[E3]:--</option>
							<option value="连线建设工程" #if($form.proProperty=='连线建设工程' ) selected='1' #end>连线建设工程</option>
							<option value="主体村工程" #if($form.proProperty=='主体村工程' ) selected='1' #end>主体村工程</option>
							<option value="非主体村工程" #if($form.proProperty=='非主体村工程' ) selected='1' #end>非主体村工程</option>
							<option value="辐射村工程" #if($form.proProperty=='辐射村工程' ) selected='1' #end>辐射村工程</option>
						</select>
					</td>
				</tr>
				<tr>
					<td style='text-align:right'>项目开工时间[E6]:</td>
					#set($startAtM=$!{form.startAtM} + 1)
					<td>
						<select id='startAtY' name='startAtY'>
							<option value="-1">--请选择--</option>
							<option #if($form.startAtY=='2014' ) selected='1' #end>2014</option>
							<option #if($form.startAtY=='2015' ) selected='1' #end>2015</option>
							<option #if($form.startAtY=='2016' ) selected='1' #end>2016</option>
							<option #if($form.startAtY=='2017' ) selected='1' #end>2017</option>
							<option #if($form.startAtY=='2018' ) selected='1' #end>2018</option>
						</select> 年
					</td>
				</tr>
				<tr>
					<td colspan='2' style='text-align:center'>合计[E9]</td>
					<td><input class='number' precision="4" id='totalFunds' type='text' value='$!{form.investment.totalFunds}' name='totalFunds' /></td>
				</tr>
				<tr>
					<td colspan='2' style='text-align:center'>中央[E10]</td>
					<td><input type='text' class='number funds' value='$!{form.investment.stateFunds}' min="0" precision="4" name='stateFunds' /></td>
				</tr>

				<tr>
					<td colspan='2' style='text-align:center'>县级财政资金[E132]</td>
					<td><input type='text' class='number funds' value='$!{form.investment.countyFunds}' min="0" precision="4" name='countyFunds' /></td>
				</tr>

				<tr>
					<td class="tdRight">备注[E25]:</td>
					<td colspan='2'>
						<textarea style='width:98%;height:100px;' name='remark'>$!{form.remark}</textarea>
					</td>
				</tr>

				<!--
				<input  type="input" name="nickName" placeholder="手机/邮箱/用户名" />
		
		
				<input  type="input" name="passWord" placeholder="密码" />

				
	-->
				<tr>
					<td colspan='3' style='text-align:right'>
						<a href="#javascript;" onclick="submitForm();return false">修改</a>
					</td>
				</tr>
			</table>
		</form>
		<script>
			function submitForm() {

				$.ajax({
					type: "POST",
					dataType: "json",

					url: 'index.updProjectMsg',
					data: $('#updProjectMsgForm').serialize(),
					success: function(result) {
						alert(result.msg);
					},
					error: function(data) {
						alert("error:" + data.responseText);
					}
				});

				//document.getElementById("updProjectMsgForm").submit();
			}
		</script>

/**
 * 
 * post document.submit()
 * 非异步表单提交
 */
	表单提交不能使用requestBody 如果使用则会报451错
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public String login(HttpServletRequest request, LoginDisplay loginDisplay){};
	
		<form id="loginForm" name="TestL" method="post" action="login">
			<div class="ui-dialog-l40 ui-dialog-pt15">
				<input class="ui-dialog-input ui-dialog-input-username" type="input" name="nickName" placeholder="手机/邮箱/用户名" />
			</div>
			<div class="ui-dialog-l40 ui-dialog-pt15">
				<input class="ui-dialog-input ui-dialog-input-password" type="input" name="passWord" placeholder="密码" />
			</div> 
			
			<div class="ui-dialog-l40">
				<a href="#">忘记密码</a>
			</div>
			<div>
				<a id="login" class="ui-dialog-submit" href="#javascript;" onclick="submitForm();return false" >登录</a>
			<input type="button" value="tj" class="btn2" onclick = "submitForm();" />
			</div>
			</form>
			<script>
			function submitForm(){
			document.getElementById("loginForm").submit();
			}
			</script>
	/*
	 * 
	 * 异步调用后台输出流图片
	 */
		<a id='area_gner' href='#' onclick='areaGr_1($ma.id);'  title='示范片简介(规划图展示)' data-settings='selected:true'>
			<div class='hide-nowrap' style='width:10em;'>◇示范片简介(规划图)</div>
		</a>
		
		<div id='show_area' class='modelAreaImg' title='${ma.name}规划图' style="width:500px;height:200px" data-settings="zone:'center'" style="padding:10px;">
	<script>
			if(url==null){
	 url='/s/ma/media/'+mid+'/1/2-imgIO.do';
	 }
		var xhr = new XMLHttpRequest();    
        xhr.open("get", url, true);
        xhr.responseType = "blob";
        xhr.onload = function() {
        if (this.status == 200) {
		
            var blob = this.response;
            var img = document.createElement("img");
            img.onload = function(e) {
              window.URL.revokeObjectURL(img.src); 
            };
            img.src = window.URL.createObjectURL(blob);
　　　　　　　$(".modelAreaImg").html(img);
	 	} 
		} 
		xhr.send();
		
	</script>
	
		/**
	 * 以流的形式输出，用于不在web-inf下的图片
	 */
	// flag 0:核心村 1:项目基本情况 2:进行中 3:结束
	@ResponseBody
	@RequestMapping("{id}/{img}/{type}-imgIO.do")
	public void imgIO(HttpServletResponse response,@PathVariable int img,@PathVariable Long id,@PathVariable int type){
		response.setHeader("Content-Type","image/jped");//设置响应的媒体类型，这样浏览器会识别出响应的是图片
		byte[] b=null;
		if(type==2){
			FileEntity fe= modelAreaService.get(id).getModelAreaImg();
//			for(FileEntity var: modelAreaService.get(id).getDirectory().getFile()){
//				System.out.println(var.getId());
//			}
			
			System.out.println(this.getClass().getResource("/").getPath());
			String[] filePathArray=this.getClass().getResource("/").getPath().split("/");
			StringBuffer sb=new StringBuffer();
			for(String var:filePathArray){
				if("target".equals(var))
					break;
					sb.append(var+"/");
			}
			sb.append("src/main/webapp");
			sb.append(fe.getMapPath());
			File f=new File(sb.toString());
			System.out.println(f.getPath());
			FileInputStream fis = null;
			try {
				fis = new FileInputStream(f);
				if(img==0){

				 BufferedImage bi = ImageIO.read(fis);
				  int newWidth = 1624;
		          int newHeight =787;
				 BufferedImage image = new BufferedImage(newWidth, newHeight,
		                    BufferedImage.TYPE_INT_BGR);
		            Graphics graphics = image.createGraphics();
		            graphics.drawImage(bi, 0, 0, newWidth, newHeight, null);
		            ImageIO.write(image,"jpg",response.getOutputStream());  		
				}else{
					b=new byte[fis.available()];
					b=Base64.encode(b);
					fis.read(b);
					response.getOutputStream().write(b);
				}
				response.flushBuffer();
			} catch (IOException e) {
				e.printStackTrace();
			}finally{
				if(fis!=null){
					try {
						fis.close();
					} catch (IOException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
					}
			}
		
		}
		
		
	}
	
	</body>

</html>